<template>
	<!-- 顶部导航栏 -->
	<view class="myNav" :style="{paddingTop:paddingTop,height:height,backgroundColor:bg}">
		<view class="bgColor" v-if="bgImage" :style="{height:height}"><image :src="bgImage" mode="widthFix" style="width: 100%;"></image></view>
		<!-- 点击回退一级 -->
		<view style="font-size: 0;display: flex;align-items: center;">
			<uni-icons v-if="isBackHome && !isSwitchTab" type="home-filled" size="24" :color="color"  @click="backHome"></uni-icons>
			<uni-icons v-else-if="isShow" type="back" size="24" :color="color"  @click="backPage"></uni-icons>
		</view>
		<view class="title" :style="{color:color}">{{count}}</view>
	</view>
</template>

<script>
	export default {
		name:"my-nav",
		data() {
			return {
				baseUrl:this.$baseUrl,
				// 外边距顶部
				paddingTop:'',
				// 字体高度
				height:'',
				isBackHome:false
			};
		},
		props:{
			bg:{
				type:String,
				default:"transparent"
			},
			// 背景图片
			bgImage:{
				type:String,
				default:""
			},
			count:{
				type:String
			},
			color:{
				type:String
			},
			isShow:{
				type:Boolean,
				default:false
			},
			isSwitchTab:{
				type:Boolean,
				default:false
			},
			// 是否拥有背景
			isHaveBg:{
				type:Boolean,
				default:false
			}
		},
		mounted() {
			let pages = getCurrentPages()
			if(pages.length == 1){
				this.isBackHome = true;
			}
		},
		methods:{
			getHeight(){
				// #ifdef H5
				this.height = '130rpx';
				// #endif
				// #ifdef MP-WEIXIN
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.paddingTop = menuButtonInfo.top+'px';
				this.height = menuButtonInfo.height+menuButtonInfo.top +8+'px';
				// #endif
			},
			backPage(){
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length > 1) {  
				    uni.navigateBack();  
				} else {  
				    history.back();  
				}
			},
			backHome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		},
		created() {
			this.getHeight()
		}
	}
</script>

<style scoped lang="scss">
.myNav{
	padding-left: 24rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	.title{
		font-size: 36rpx;
		font-weight: 600;
	}
	.bgColor {
		width: 100%;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -10;
	}
}
</style>